<template>
  <div id="讲师列表">
    <el-card>
      <el-form :inline="true" :model="teacherQuery">
        <el-form-item>
          <el-input v-model="teacherQuery.name" placeholder="讲师名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
            <el-option label="高级讲师" :value="1"></el-option>
            <el-option label="首席讲师" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="添加时间">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="teacherQuery.begin"
            style="width: 100%;"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            v-model="teacherQuery.end"
            style="width: 100%;"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
          ></el-date-picker>

          <el-button type="primary" @click="getPageList()">查询</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" prop="no" label="序号" width="50%">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="80"> </el-table-column>
        <el-table-column prop="level" label="头衔" width="100">
          <template slot-scope="scope">
            {{ scope.row.level == 1 ? "高级讲师" : "首席讲师" }}
          </template>
        </el-table-column>
        <el-table-column prop="intro" label="资历" width="280">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="添加时间"> </el-table-column>
        <el-table-column prop="sort" label="排序" width="50px">
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <!-- d定义域插槽!-->
            <!-- 修-->
            <!-- 跳转路径 -->
            <router-link :to="'/Learning/teacher/edit/' + scope.row.id">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
              ></el-button>
            </router-link>
            <!-- 删 -->
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="ShowDeleMessage(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域!-->
      <!--@current-change 当换页时 会调用该方法 然后返回一个当前页的值 -->
      <el-pagination
        @current-change="getPageList"
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import teacher from "@/api/edu/teacher.js";
export default {
  data() {
    return {
      list: [],
      total: 0, //总数
      page: 1, //当前页
      pageSize: 5, //每页记录数
      teacherQuery: {},

      // 修
      EditDialogVisible: true,
      thisTeather: {
        id: 0,
        name: "",
        intro: "",
        career: "",
        level: 1,
        avatar: "",
        sort: ""
      }
    };
  },
  created() {
    this.getPageList();
  },
  methods: {
    getPageList(page = 1) {
      this.page = page;
      teacher
        .getTeacherListPage(this.page, this.pageSize, this.teacherQuery)
        .then(response => {
          //请求成功
          console.log(response);
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .catch(error => {
          //请求失败
          console.log(error);
        });
    },

    ShowDeleMessage(id) {
      this.$confirm("此操作将永久删除该讲师记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          teacher
            .deleteTeacherId(id)
            .then(response => {
              //删除成功
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getPageList();
            })
            .catch(error => {
              console.log(error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    EditClose() {
      this.$refs.EditFormRef.resetFields();
    }
  }
};
</script>

<style></style>
